import React, { Component } from 'react'
// react中操作表单：
// 1. 可以受控的表单元素:  文本框,密码框,文本域,下拉框
// 2. 不能受控的表单元素: 多个单选, 多个复选框,上传文件
export default class App extends Component {
  state = {
    info: '',
    city: '',
    sex: '',
    hobby: [],
    isAgree: false,
  }
  handle = (name) => {
    return (e) => {
      // 这个函数才是onChange事件的事件处理函数
      //判断是否是复选框,是则获取checked的值,不是则其他表单元素都是获取value
      const value =
        e.target.type === 'checkbox' ? e.target.checked : e.target.value.trim()
      this.setState({
        [name]: value,
      })
    }
  }

  handle = (name) => (e) => {
    // 这个函数才是onChange事件的事件处理函数
    //判断是否是复选框,是则获取checked的值,不是则其他表单元素都是获取value
    const value =
      e.target.type === 'checkbox' ? e.target.checked : e.target.value.trim()
    this.setState({
      [name]: value,
    })
  }

  // a = (b) => (c) => (d) => {}

  // a = (b) => {
  //   return c => {
  //     return d=>{
  //   }
  // }

  hobbyHandle = (e) => {
    console.log(e.target)
    // 获取选中的复选框的值
    const value = e.target.value

    // 获取当前value在数组中的下标
    const index = this.state.hobby.indexOf(value)
    //判断这个值是否在hobby数组中,在则删除,不再则添加
    if (index !== -1) {
      //删除
      this.state.hobby.splice(index, 1)
    } else {
      // 添加
      this.state.hobby.push(value)
    }
    this.setState({
      hobby: this.state.hobby,
    })
  }

  render() {
    const { info, city, isAgree } = this.state
    return (
      <div>
        <form>
          {/* 文本框,密码框,文本域... 都是通过value属性控制 */}
          自我介绍:
          <textarea
            id=""
            cols="30"
            rows="10"
            value={info}
            onChange={this.handle('info')}
          ></textarea>
          <br />
          选择城市:
          {/* 注意: jsx中控制下拉框中的option选中,是通过select的value属性控制,select的value的值和option的值相同,则对应的option被选中 */}
          <select id="" value={city} onChange={this.handle('city')}>
            <option value="">选择城市</option>
            <option value="sz">深圳</option>
            <option value="bj">北京</option>
          </select>
          <br />
          性别: <br />
          {/* 注意: 实际开发中不可能只写一个单选框, 但是写多个单选框就不是为了控制单选框是否选中,而是收集选中的单选框的数据 */}
          男:
          <input
            type="radio"
            name="sex"
            value="male"
            onChange={this.handle('sex')}
          />
          <br />
          女:
          <input
            type="radio"
            name="sex"
            value="female"
            onChange={this.handle('sex')}
          />
          <br />
          是否同意协议:
          <input
            type="checkbox"
            checked={isAgree}
            onChange={this.handle('isAgree')}
          />
          <br />
          爱好: <br />
          {/* 一个复选框是要控制这个复选框是否选中,控制checked */}
          {/* 多个复选框就是为了收集数据了就不能控制了 */}
          抽烟:
          <input type="checkbox" value="smoke" onChange={this.hobbyHandle} />
          <br />
          喝酒:
          <input type="checkbox" value="drink" onChange={this.hobbyHandle} />
          <br />
          找富婆:
          <input type="checkbox" value="findRich" onChange={this.hobbyHandle} />
          <br />
          {/* 注意： 上传文件的表单元素无法受控 */}
          <input type="file" />
        </form>
      </div>
    )
  }
}
